<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电子产品 | 关于</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .header {
            width: 1250px;
            height: 80px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header .h-container {
            height: 100%;
            width: 323px;
            background-color: #ffc42a;
            transform: skewX(-20deg);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .h-container .hc-c {
            display: flex;
            transform: skewX(20deg);
            font-size: 12px;
        }

        .h-container .hc-c p {
            display: flex;
            align-items: center;
            margin-right: 15px;
        }

        .hc-c .h-c-img {
            width: 15px;
        }

        .header-nav {
            width: 1250px;
            font: 14px;
            color: #fff;
            background-size: 2px 100%;
            background-color: #2e2e2e;
            display: flex;
        }

        .header-nav p {
            height: 66px;
            padding-left: 20px;
            padding-right: 20px;
            text-align: center;
            line-height: 66px;
        }

        .header-nav p:first-child {
            padding-left: 0px;
        }

        .header-nav p:hover {
            color: #ffc42a;
        }

        .header-tabs {
            height: 60px;
            line-height: 60px;
            font-size: 12px;
        }

        .container {
            width: 1250px;
            height: 867px;
            display: flex;
            box-sizing: border-box;
            overflow: hidden;
            justify-content: space-between;
        }

        .container .cc-left {
            width: 750px;
            padding-right: 120px;
            background-color: #fff;
            box-sizing: border-box;
            flex-shrink: 0;
        }

        .cc-left .ccl-title {
            margin-top: 40px;
            font-size: 20px;
            font-weight: 600;
            color: #2e2e2e;
        }

        .b-border {
            margin-top: 10px;
            width: 30px;
            border-bottom: 4px solid #ffc42a;
        }

        .cclt-con .con-1 .con-title {
            font-size: 15px;
            color: rgb(0, 0, 0);
            margin-top: 30px;
        }

        .cclt-con .con-1 .con-text {
            padding-right: 20px;
            font-size: 13px;
            color: #555555;
            margin-top: 15px;
            line-height: 30px;
        }

        .container .cc-right {
            background-color: #f4f8fb;
            flex: 1;
            padding-top: 110px;
        }

        .container .cc-right img {
            width: 560px;
            height: 656px;
            transform: translateX(-80px);
        }

        .footer {
            height: 336px;
            background-color: #f7f7f7;
            padding-top: 150px;
            padding-bottom: 150px;
            box-sizing: border-box;
        }

        .footer {
            width: 1250px;
            display: flex;
            justify-content: space-between;
            padding-top: 60px;
            box-sizing: border-box;
        }

        .f-top {
            margin-bottom: 20px;
        }

        .footer-1 .f-title {
            font-size: 24px;
            font-weight: 500;
            color: #000;
        }

        .footer-1 .f-content {
            font-size: 15px;
            color: #555555;
            margin-top: 20px;
        }

        .f-content p {
            margin-bottom: 10px;
        }

        .f-content2 {
            height: 90px;
            display: flex;
            align-items: center;
        }

        .f-content2 textarea {
            height: 100%;
        }

        .f-content2 button {
            height: 100%;
            background-color: #ffc42a;
            margin-left: 20px;
            padding-left: 10px;
            padding-right: 10px;
            border: none;
        }

        .color-1 {
            background-color: #f7f7f7;
        }

        .color-2 {
            background-color: #2e2e2e;
        }

        .color-3 {
            background-image: linear-gradient(to right, #fff, #f4f8fb);
        }
    </style>
    <!-- 引入动画库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
</head>

<body>
    <div class="box">
        <div class="header">
            <a href="../pages/Neaste163.html">
                <img src="../images/logo.png" alt="" class="logo"></a>
            <div class="h-container">
                <div class="hc-c">
                    <a href="../pages/Neastelogin.html" style="color:black;text-decoration:none ;">
                        <img class="h-c-img" src="../images/img01.png" alt=""> 登录
                    </a>
                    <a href="../pages/Neasteregest.html" style="color:black;text-decoration:none ;">
                        <img class="h-c-img" src="../images/img02.png" alt=""> 注册
                    </a>
                    <a href="">
                        <img class="h-c-img" src="../images/img03.png" alt="">
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="box color-2">
        <div class="header-nav">
            <p><a href="../pages/Neaste163.html" style="color: #fff;text-decoration:none;">首页</a></p>
            <p><a href="../pages/indet.html" style="color: #fff;text-decoration:none;">关于</a></p>
            <p><a href="../pages/faq.html" style="color: #fff;text-decoration:none;">FAQ</a></p>
            <p><a href="../pages/N1easteAftershop.html" style="color: #fff;text-decoration:none;">售后</a></p>
            <p><a href="../pages/suggest.html" style="color: #fff;text-decoration:none;">联系</a></p>
        </div>
    </div>

    <div class="box color-3">
        <div class="container">
            <div class="cc-left">
                <div class="header-tabs">
                    首页 / 关于
                </div>
                <div class="ccl-title">
                    关于企业
                    <p class="b-border"></p>
                </div>
                <!-- animate__animated animate__backInLeft 调用动画库 -->
                <div class="cclt-con animate__animated animate__backInLeft">
                    <div class="con-1">
                        <p class="con-text">
                            当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。 无论您是普通互联网用户，
                            还是专业网站制作人员，都能使用起飞页设计出最具专业水准的网站。
                            我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。起飞页提供了海量精美网站模板和成品网站，
                            起飞页的核心竞争力来自于它集流线式布局方案与可视化内容编辑于一体。
                        </p>
                    </div>
                    <div class="con-1">
                        <p class="con-text">
                            当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。 无论您是普通互联网用户，
                            还是专业网站制作人员，都能使用起飞页设计出最具专业水准的网站。
                            我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。起飞页提供了海量精美网站模板和成品网站，
                            起飞页的核心竞争力来自于它集流线式布局方案与可视化内容编辑于一体。
                        </p>
                    </div>
                    <div class="con-1">
                        <div class="ccl-title">
                            信息联系
                            <p class="b-border"></p>
                        </div>
                        <p class="con-text">
                            当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。<br /> 地址：苏州市工业园区中新大道西188号加成大厦
                            <br /> 电话：+86 188 2356 7896<br /> 邮箱：qifeiye@admin.com
                            <br />
                        </p>
                    </div>
                </div>
            </div>
            <div class="cc-right">
                <img id="lunbo_img" src="../images/swiper/img01.png" alt="">
            </div>
        </div>
    </div>
    <div class="box color-1">
        <div class="footer">
            <div class="footer-1">
                <div class="f-top">
                    <p class="f-title">
                        Contact
                    </p>
                    <p class="f-content">
                        地址：江苏省苏州市工业园区中新大道西加成大厦
                    </p>
                </div>
                <div class="f-bottom">
                    <p class="f-title">
                        +86 123 1234 1234
                    </p>
                    <p class="f-content">
                        邮箱：qifeiye@admin.com
                    </p>
                </div>
            </div>
            <div class="footer-1">
                <p class="f-title">
                    Quick Links
                </p>
                <div class="f-content">
                    <p>常见问题</p>
                    <p>测评中心</p>
                    <p>保修政策</p>
                    <p>售后服务</p>
                    <p>售后服务</p>
                </div>
            </div>
            <div class="footer-1">
                <p class="f-title">
                    Products
                </p>
                <div class="f-content">
                    <p>充电</p>
                    <p>手机</p>
                    <p>生活</p>
                    <p>配件</p>
                    <p>音乐</p>
                </div>
            </div>
            <div class="footer-1">
                <p class="f-title">
                    Feedback
                </p>
                <div class="f-content f-content2">
                    <textarea placeholder="内容" name="" id="idea" cols="50" rows="5"></textarea>
                    <button onclick="submit()">提交</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        // 轮播图
        var index = 1;

        function lunbo() {
            index++;
            //判断index是否大于3（大于三回到第一张）
            if (index > 3) {
                index = 1;
            }
            //获取img对象
            var img = document.getElementById("lunbo_img");
            // 设置img 的src 属性值
            img.src = "./images/swiper/img0" + index + ".png";
        }
        //2.定义定时器
        setInterval(lunbo, 2000);

        // 表单提交
        function submit() {
            // 获取输入框元素的输入数据，并且去除空格
            var idea = document.getElementById('idea').value.trim()
            // 判定是输入框是否有内容
            if (!idea) {
                // 弹框提示
                alert('请输入内容在提交');
            } else {
                alert('感谢您的意见: ' + idea);
            }
        }
    </script>
</body>

</html>